<template>
  <div class="page">
    <headerbar>找回密码</headerbar>
    <section class="pdh-4 pdv-2">
      <div class="pdv-5"></div>
      <div class="input-column-wrap">
        <div class="input-wrap">
          <input type="text" placeholder="请输入手机号码" v-model="mobile">
        </div>
      </div>
      <div class="pdv-2"></div>

      <div class="input-generate-code input-column-wrap">
        <div class="input-wrap">
          <input type="text" placeholder="请输入验证码" v-model="code">
        </div>
        <div v-if="sendAuthCode" class="generate-code" @click="getCode()">获取验证码</div>
        <div v-if="!sendAuthCode" class="generate-code"><span class="auth_text_blue">{{auth_time}}</span>秒之后重新发送</div>
      </div>
      <div class="pdv-2"></div>

      <!--<div class="input-column-wrap">
      <div class="input-wrap">
        <input type="password" placeholder="请输入新密码（6-20位英文或数字）">
      </div>
      </div>-->

      <div class="pdv-3"></div>
      <div @click="sureCode()" class="default-block-btn">确认</div>
    </section>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  export default {
    name: '',
    data () {
      return {
        fn: tools,
        mobile: '',
        codeData: '',
        code: '',
        uuid: '',
        sendAuthCode: true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
        auth_time: 0 /*倒计时 计数器*/
      }
    },
    created () {
      this.userInfo = this.$localStorage.get('userInfo')
    },
    methods: {
      getCode () {
        if (this.mobile === '') {
          return tools.alert('请输入手机号码！')
        }
        if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
          return tools.alert('手机号码格式有误，请重新输入')
        }
        loginService.sendCode(this.mobile).then((res) => {
          if (res.code === 0) {
            this.codeData = res.data
            this.getCodes()
          } else {
            tools.alert(res.message)
          }
        })
        // this.getCodes()
      },
      sureCode () {
        if (this.code === '') {
          return tools.alert('请输入验证码！')
        }
        let data = {
          code: this.code,
          key: this.codeData
        }
        loginService.checkCode(data).then((res) => {
          if (res.code === 0) {
            this.uuid = res.data
            this.$router.push({path: `/setPwd/${this.uuid}`})
          } else {
            tools.alert(res.message)
          }
        })
      },
      getCodes () {
        this.sendAuthCode = false
        this.auth_time = 300
        var authTimetimer = setInterval(() => {
          this.auth_time--
          if (this.auth_time <= 0) {
            this.sendAuthCode = true
            clearInterval(authTimetimer)
          }
        }, 1000)
      }
    }
  }
</script>

<style scoped lang="scss">
  .setup-input {
    height: 40px !important;
  }
  .mui-table-view {
    font-size: 14PX;
    .mui-table-view-cell {
      padding: 15px 30px;
    }
  }
</style>
